<template>
  <div class="percont">
    <el-row class="helptitle">个人中心</el-row>
    <div class="helpmain">
      <div class="p_main">
        <el-row class="perline">
          <el-col :span="8" class="leftlie">
              <p>手机号：</p>
              <p>密　码：</p>
              <p>姓　名：</p>
              <p>公司名称：</p>
              <p>公司标志：</p>
          </el-col>
          <el-col :span="8" class="midlie">
            <p>{{userinfo.phone}}</p>
            <p>
            ********
            </p>
            <p>{{userinfo.username}}</p>
            <p>{{userinfo.company}}</p>
            <p>
              <img v-if="userinfo.company_logo" :src="userinfo.company_logo" class="avatar">
            </p>
          </el-col>
          <el-col :span="8" class="rigthlie">
            <p style="color:transparent">1</p>
            <p class="editpass" @click="dialogFormVisible = true">修改</p>
            <p> 
            <el-radio disabled v-model="userinfo.sex" label="0">先生</el-radio>
            <el-radio disabled v-model="userinfo.sex" label="1">女士</el-radio>
            </p>
              <p style="color:transparent">1</p>
            <p><span style="color:#606266;font-size:14px"> (只支持JPG、PNG格式，大小不超过500kb！)</span></p>
          </el-col>
          <div style="text-align: center;">
            <el-button class="submitlist" @click="handback">退出</el-button>
            <div class="greyline"></div>
            <router-link to="/start" class="backlo"><i class="el-icon-back"></i>返回首页</router-link>
          </div>
        </el-row>
        <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
          <el-form class="dialogform">
            <el-form-item label="手机号：">
              <el-input v-model="set_userinfo_obj.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="set_userinfo_obj.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
              <el-input v-model="set_userinfo_obj.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
              <el-input v-model="set_userinfo_obj.company" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="set_userinfo_obj.sex" label="0">先生</el-radio>
              <el-radio v-model="set_userinfo_obj.sex" label="1">女士</el-radio>
            </el-form-item>
            <el-form-item label="公司标志">
            <el-upload
              class="avatar-uploader"
              :action="UploadUrl+'/user/uploadPic'"
              :data="token"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              >
              <img v-if="set_userinfo_obj.company_logo" :src="set_userinfo_obj.company_logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="set_userinfo">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import request2 from "../../utils/request-new"
export default {
  name:'Personal',
  data(){
    return{
      UploadUrl:'',
      imageUrl: '',
      radio:'1',
      password:'',
      dialogFormVisible:false,
      userinfo:{
        id:'',
        username:'',
        phone:'',
        sex:'',
        company_logo:'',
        company:'',
      },
      set_userinfo_obj:{
         id:'',
        username:'',
        phone:'',
        sex:'',
        company_logo:'',
        company:'',
      },
      token:{
        token:this.$store.getters.token,
      },
    }
  },
  created(){
    this.get_uesrinfo()
  },
  mounted(){
    this.UploadUrl=process.env.VUE_APP_UAVAPI_BASE
    // console.log(process.env.VUE_APP_UAVAPI_BASE)
  },
  watch:{
    userinfo:{
      deep:true,
      handler(e){}
    },
    set_userinfo_obj:{
      deep:true,
      handler(e){}
    },
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.set_userinfo_obj.company_logo = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' ||file.type === 'image/png';
      const isLt2M = file.size /1024 < 500;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!');
      }
      return isJPG && isLt2M;
    },
    handback(){
      this.$router.push('/start');
    },
    get_uesrinfo(){
      request2({
        url: "user/profile",
        method: "post",
        data: {
          token: this.$store.getters.token,
        }
      })
      .then(response => {
        this.userinfo=response.data
        this.set_userinfo_obj=response.data
      })
      .catch(err => {
      });
    },
    set_userinfo(){
      console.log()
      request2({
        url: "/user/editProfile",
        method: "post",
        data: {
          token: this.$store.getters.token,
          phone:this.set_userinfo_obj.phone,
          password:this.set_userinfo_obj.password,
          username:this.set_userinfo_obj.username,
          sex:this.set_userinfo_obj.sex,
          company:this.set_userinfo_obj.company,
          company_logo:this.set_userinfo_obj.company_logo
        }
      })
      .then(response => {
        this.$message.success('修改成功');
        this.get_uesrinfo()
        this.dialogFormVisible = false
      })
      .catch(err => {
      });
    },
  },
}
</script>
<style lang="scss">
  .percont{
       .helptitle{
        color: #347dc7;
        padding: 0px 0 15px 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        padding-top: 20px;
   }
   .helpmain{
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     width: 80%;
     margin-bottom: 50px;

   }
     .p_main{
      width: 80%;
      margin: 0 auto;
      .perline{
        padding: 50px 0px;
        text-align: center;
        color: #8c939d
      }
      .leftlie p{
        padding: 15px 0px;
          font-weight: bolder;
        // text-align: right;
      }
     .midlie p{
         padding: 15px 0px;
         text-align: left;
           font-weight: bolder;

     }
     .rigthlie p{
           padding: 15px 0px;
         text-align: left;
           font-weight: bolder;
     }
     .editpass{
         color:#347dc7;
         cursor: pointer;
     }
      }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      height: 178px;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 16px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      position: relative;
      z-index: 99;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: inline-block;
    }
    .dialogform{
      .el-input {
        width: 80%
      }

    }
    .el-dialog{
      background-color: #fff
    }
    .el-dialog .el-dialog__header{
      background-color: #fff;
      
    }
    .el-dialog .el-dialog__title{
      color:#606266;
    }
     .greyline{
          width: 100%;
          height: 2px;
          background-color: #eee;
          margin-bottom: 40px;
      }
      .backlo{
         color: #337DC7;
         font-size: 15px;
         font-weight: 500;
          // margin-bottom: 40px;
      }
      .el-icon-back{
          padding-right: 6px
      }
       .submitlist{
        width: 40%;
        background-color: #337DC7;
        color:#fff;
         margin-top:40px;
        margin-bottom: 40px;
     }
     .el-form-item__label {
       width: 1rem;
     }
    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
      background-color: #337DC7;
    }

  }
</style>